There is always a moment where you have to compare between two entities where creating your Angular application or any other application. These entities can be variables or array objects. The theory of comparison has helped to break down a lot of complex logic into simple words. These comparisons can be made with conditionals.
In this article, I will describe a simple way to understand how to make comparisons in your Angular project using the * ngIf else and then Angular directive.
Before Start, I would like to explain about ng-template in angular.
What is < ng-template >?
We will use < ng-template > in this article to fulfill ng If and else condition in angular.
We use the < ng-template > because it’s also considered “virtual”. much like it’s HTML5 counterpart template.
Being “virtual” means that the contents of < ng-template > will not actually exist in the compiled DOM until it is required (you will never see it until Angular makes it).
When it is required (for example, the “else” expression kicks in), Angular captures the contents of the < ng-template > tag and replaces the * ngIf contents with it. This is it.
*ngIf in Angular
Let’s look at the NgIf directive. You will learn how to view and hide DOM content based on your information.
NgIf is a behavioral directive that allows us to use a conditional statement to toggle a template.
*ngIf Syntax
The ngIf directive syntax looks like below code:
|
2 3 4 5 6 |
<div *ngif="condition"> <p>Render & display content when condition is true.</p> </div> |
ngIf and ng-template
An extended version of ngIf with ng-template. this would look like below syntax:
|
2 3 4 5 6 |
<ng-template [ngif]="condition"> <div>Render & display content when condition is true.</div> </ng-template> |
Let’s take an empty component and a simple Boolean value of true:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Component({ selector: 'app-component', template: ` <div> Welcome Tutorialswebsite! </div> `, }) export class AppComponent { isLoggedIn = true; } |
The basic syntax of the ngIf directive is simple and effective, all we need to do is prefix the name of the directive with an asterisk (*) and add it anywhere within our template:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- negated variable to achieve "if not" --> <div *ngIf="!isLoggedIn"> You are not logged in to tutorialswebsite. </div> <!---- An extended version using ng-template to achieve "if not" -------> <ng-template [ngIf]="!isLoggedIn"> <div>You are not logged in to tutorialswebsite.</div> </ng-template> |
*ngIf Else
The concept is that your logic should be structured like: if the condition is met, do this, else do something fresh. After using the else clause, the syntax looks like this:
|
2 3 4 5 6 7 8 9 10 |
<div *ngif="isLoggedIn; else loggedOut"> Welcome back, Tutorialswebsite. </div> <ng-template #loggedout=""> <div>You are not logged in to tutorialswebsite.</div> </ng-template> |
what’s this #loggedOut syntax in above code?
#loggedOutis a template variable. You can name template variables as you wish. Using a template variable means that we can create a reference to a specific template part and then use it elsewhere – in this example, we’re supplying it as an “else” value to ngIf.
we can supply ngIf, ngIfElse (and ngIfThen) the same way like below:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ng-template [ngif]="isLoggedIn" [ngifelse]="loggedOut"> <div> Welcome back, Tutorialswebsite. </div> </ng-template> <ng-template #loggedout=""> <div> You are not logged in to tutorialswebsite. </div> </ng-template> |
*ngIf, Then and Else
In certain use cases, the use of the “then” syntax often provides more flexibility, where we can dynamically change the reference to the template instead to-effectively swapping < ng-template > on the fly (although a less common use case).
This syntax aligns more with thinking in the flow of ternary statements.
|
2 3 4 |
ngIf = expression ? then : else; |
Let’s see the *ngIf, Then and Else condition.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div *ngif="isLoggedIn; then loggedIn; else loggedOut"> </div> <ng-template #loggedin=""> <div> Welcome back, Tutorialswebsite. </div> </ng-template> <ng-template #loggedout=""> <div> You are loggedout. </div> </ng-template> |
You will find that “expression” is never used, it is only there to tell the runtime of JavaScript which value to render. The same applies to the above case-which would mean that we do not render a DOM node until our NgIf expression is evaluated and rendered subsequently.
NgIf or [hidden]?
ngIf will comment out the data if the expression is false. This way the data are not even loaded, causing HTML to load faster.
[hidden] will load the data and mark them with the hidden HTML attribute. This way data are loaded even if they are not visible.
So [hidden] is better used when we want the show/hide status to change frequently, for example on a button click event, so we do not have to load the data every time the button is clicked, just changing its hidden attribute would be enough.
Note that the performance difference may not be visible with small data, only with larger objects.
Syntax:
|
2 3 4 5 6 |
<div [hidden]="!isLoggedIn"> Welcome back, friend. </div> |
Add a hidden attribute if the isLoggedIn property was true. You’ll note here that I’ve negated the expression by using the not (!) operator within the expression.
As you can see hidden attribute is a more sophisticated then style=”display: none;”.
Also Read: Decorator in Angular?
Conclusion:
Well, I hope you found this tutorial helpful and you have gone through the Angular, *ngIf else and then directive and how it is used to make handling comparisons easy. Keep learning!. If you face any problem – I am here to solve your problems.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
